<template>
    <el-dropdown @command="handleCommand" trigger="click">
        <span class="el-dropdown-link">
            <span>
                {{ type == "zh" ? "中文" : "English" }}
            </span>
            <el-icon class="el-icon--right">
                <arrow-down />
            </el-icon>
        </span>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item command="zh">中文</el-dropdown-item>
                <el-dropdown-item command="en">English</el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>
  
<script lang="ts" setup>
import { ArrowDown } from "@element-plus/icons-vue";
import { i18n } from "@/i18n";
import { ref } from "vue";

const emit = defineEmits<{ (e: 'emitLocale'): void }>()//定义的触发的方法
let type = ref('')
type.value=i18n.global.locale
const handleCommand = (data: string) => {
    localStorage.setItem("language", data);
    // 改变数据中的类型
    type.value = data;
    // 改变i18n中的类型
    (i18n.global.locale as string)= data;
    emit('emitLocale')
}
</script>
  
<style scoped lang="less">

</style>

  